<template>
  <div class="movie-container content-container">
    <!-- 头部banner -->
    <div class="movie-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">电影频道</h1>
        <p class="banner-subtitle">探索全球精彩电影，感受光影艺术魅力</p>
      </div>
    </div>

    <!-- 内容分类标签 -->
    <div class="movie-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        class="category-tab"
        :class="{ active: activeCategory === category.id }"
        @click="activeCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 热门电影轮播 -->
      <div class="popular-movies-section">
      <div class="section-header">
        <h2>热门电影</h2>
        <a href="#" class="more-link">更多热门 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="carousel-container">
        <div class="carousel-track" :style="{ transform: `translateX(-${carouselIndex * 100}%)` }">
          <div v-for="movie in popularMovies" :key="movie.id" class="carousel-item">
            <div class="movie-card-large">
              <img :src="movie.image" :alt="movie.title" class="movie-poster-large">
              <div class="movie-info-large">
                <div class="movie-rating">
                  <span class="rating-number">{{ movie.rating }}</span>
                  <span class="rating-text">评分</span>
                </div>
                <h3 class="movie-title-large">{{ movie.title }}</h3>
                <p class="movie-description">{{ movie.description }}</p>
                <div class="movie-details">
                  <span class="detail-item"><i class="fa fa-calendar"></i> {{ movie.year }}</span>
                  <span class="detail-item"><i class="fa fa-clock-o"></i> {{ movie.duration }}</span>
                  <span class="detail-item"><i class="fa fa-map-marker"></i> {{ movie.country }}</span>
                  <span class="detail-item"><i class="fa fa-trophy"></i> {{ movie.boxOffice }}</span>
                </div>
                <div class="movie-crew">
                  <p><strong>导演：</strong>{{ movie.director }}</p>
                  <p><strong>主演：</strong>{{ movie.actors.join('、') }}</p>
                </div>
                <div class="movie-genres">
                  <span 
                    v-for="genre in movie.genres" 
                    :key="genre"
                    class="genre-tag"
                  >
                    {{ genre }}
                  </span>
                </div>
                <div class="movie-actions">
                  <button class="watch-trailer-btn">
                    <i class="fa fa-play-circle"></i> 观看预告片
                  </button>
                  <button class="add-to-wishlist-btn">
                    <i class="fa fa-heart-o"></i> 收藏
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button class="carousel-prev" @click="prevSlide"><i class="fa fa-chevron-left"></i></button>
        <button class="carousel-next" @click="nextSlide"><i class="fa fa-chevron-right"></i></button>
        <div class="carousel-dots">
          <span 
            v-for="(movie, index) in popularMovies" 
            :key="index"
            class="dot"
            :class="{ active: index === carouselIndex }"
            @click="carouselIndex = index"
          ></span>
        </div>
      </div>
    </div>

    <!-- 最新上映 -->
    <div class="new-releases-section">
      <div class="section-header">
        <h2>最新上映</h2>
      </div>
      <div class="movies-grid">
        <div 
          v-for="movie in newReleases" 
          :key="movie.id"
          class="movie-card"
        >
          <div class="movie-poster-container">
            <img :src="movie.image" :alt="movie.title" class="movie-poster">
            <div class="movie-rating-small">
              <i class="fa fa-star"></i>
              <span>{{ movie.rating }}</span>
            </div>
            <div class="movie-duration-badge">
              {{ movie.duration || '未知' }}
            </div>
          </div>
          <h3 class="movie-title">{{ movie.title }}</h3>
          <p class="movie-info">{{ movie.releaseDate }} • {{ movie.director }}</p>
          <p class="movie-actors">{{ movie.actors.join('、') }}</p>
          <div class="movie-genres-small">
            <span 
              v-for="(genre, index) in movie.genres.slice(0, 2)" 
              :key="index"
              class="genre-tag-small"
            >
              {{ genre }}
            </span>
          </div>
          <div class="movie-card-actions">
            <button class="view-details-btn">
              <i class="fa fa-info-circle"></i> 详情
            </button>
            <button class="add-to-wishlist-small">
              <i class="fa fa-heart-o"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 经典影片 -->
    <div class="classic-movies-section">
      <div class="section-header">
        <h2>经典影片</h2>
      </div>
      <div class="movies-grid">
        <div 
          v-for="movie in classicMovies" 
          :key="movie.id"
          class="movie-card"
        >
          <div class="classic-movie-container">
            <img :src="movie.image" :alt="movie.title" class="movie-poster">
            <div class="movie-rating-badge">{{ movie.rating }}</div>
            <div class="classic-badge">经典</div>
          </div>
          <div class="movie-info">
            <h3 class="movie-title">{{ movie.title }}</h3>
            <p class="movie-year">{{ movie.year }} • {{ movie.country || '未知' }}</p>
            <p class="movie-director">{{ movie.director }}</p>
            <div class="movie-genres-small">
              <span 
                v-for="(genre, index) in movie.genres.slice(0, 2)" 
                :key="index"
                class="genre-tag-small"
              >
                {{ genre }}
              </span>
            </div>
            <button class="watch-btn">
              <i class="fa fa-play"></i> 观看
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 精选影评 -->
    <div class="movie-reviews-section">
      <div class="section-header">
        <h2>精选影评</h2>
      </div>
      <div class="reviews-list">
        <div 
          v-for="review in movieReviews" 
          :key="review.id"
          class="review-card"
        >
          <div class="review-header">
            <img v-img-error :src="review.avatar" :alt="review.username" class="user-avatar">
            <div class="user-info">
              <div class="user-name-container">
                <h4 class="username">{{ review.username }}</h4>
                <span v-if="review.verified" class="verified-badge" title="实名认证">
                  <i class="fa fa-check-circle"></i>
                </span>
                <span v-if="review.userLevel" class="user-level">{{ review.userLevel }}</span>
              </div>
              <p class="review-date">{{ review.date }}</p>
            </div>
            <div class="review-rating">
              <span class="rating-stars">
                <i v-for="n in 5" :key="n" class="fa fa-star" :class="{ active: n <= review.rating }"></i>
              </span>
            </div>
          </div>
          <h3 class="review-movie-title">《{{ review.movieTitle }}》</h3>
          <div class="review-content">
            <p>{{ review.content }}</p>
            <p v-if="review.spoilerAlert" class="spoiler-alert">
              <i class="fa fa-exclamation-triangle"></i> 包含剧透内容
            </p>
          </div>
          <div v-if="review.tags && review.tags.length > 0" class="review-tags">
            <span 
              v-for="(tag, index) in review.tags" 
              :key="index"
              class="review-tag"
            >
              #{{ tag }}
            </span>
          </div>
          <div class="review-actions">
            <button class="action-btn like-btn">
              <i class="fa fa-thumbs-up"></i> {{ review.likes }}
            </button>
            <button class="action-btn comment-btn">
              <i class="fa fa-comment"></i> {{ review.comments }}
            </button>
            <button class="action-btn share-btn">
              <i class="fa fa-share-alt"></i> 分享
            </button>
          </div>
          <div class="review-stats">
            <span class="view-count"><i class="fa fa-eye"></i> {{ review.views || 0 }} 次浏览</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 即将上映 -->
    <div class="upcoming-movies-section">
      <div class="section-header">
        <h2>即将上映</h2>
      </div>
      <div class="upcoming-list">
        <div 
          v-for="movie in upcomingMovies" 
          :key="movie.id"
          class="upcoming-card"
        >
          <div class="release-date">
            <span class="release-month">{{ movie.releaseMonth }}</span>
            <span class="release-day">{{ movie.releaseDay }}</span>
          </div>
          <img :src="movie.image" :alt="movie.title" class="upcoming-poster">
          <div class="upcoming-info">
            <h3 class="upcoming-title">{{ movie.title }}</h3>
            <p class="upcoming-subtitle">{{ movie.subtitle }}</p>
            <div v-if="movie.expectRating" class="expected-rating">
              <i class="fa fa-star"></i>
              <span>{{ movie.expectRating }}</span>
            </div>
            <div class="upcoming-genres">
              <span 
                v-for="genre in movie.genres" 
                :key="genre"
                class="mini-genre-tag"
              >
                {{ genre }}
              </span>
            </div>
            <p class="movie-director">{{ movie.director }}</p>
            <p class="movie-actors">{{ movie.actors.slice(0, 3).join('、') }}等</p>
            <div class="movie-stats">
              <span class="want-watch-count"><i class="fa fa-heart-o"></i> {{ movie.wantWatch }} 人想看</span>
            </div>
            <div class="movie-actions">
              <button class="add-to-wishlist-btn">
                <i class="fa fa-heart-o"></i> 想看
              </button>
              <button class="remind-btn">
                <i class="fa fa-bell"></i> 提醒
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import logoImage from '@/assets/logo.png'
import { getLocalImage } from '../utils/imageMap.js'

export default {
  name: 'MovieView',
  data() {
    return {
      // 分类数据
      categories: [
        { id: 'all', name: '全部' },
        { id: 'action', name: '动作' },
        { id: 'comedy', name: '喜剧' },
        { id: 'drama', name: '剧情' },
        { id: 'sci-fi', name: '科幻' },
        { id: 'romance', name: '爱情' },
        { id: 'thriller', name: '惊悚' },
        { id: 'horror', name: '恐怖' },
        { id: 'animation', name: '动画' },
        { id: 'documentary', name: '纪录片' },
      ],
      activeCategory: 'all',
      
      // 轮播图索引
      carouselIndex: 0,
      
      // 热门电影（轮播）
      popularMovies: [
        {
          id: 1,
          title: '流浪地球3',
          image: getLocalImage('https://via.placeholder.com/300x450?text=流浪地球3'),
          rating: 9.2,
          year: 2024,
          duration: '178分钟',
          country: '中国',
          genres: ['科幻', '冒险', '动作'],
          description: '太阳危机即将爆发，人类再次启动流浪地球计划，这一次，人类能否找到新的家园？中国科幻电影的又一里程碑作品。',
          director: '郭帆',
          actors: ['吴京', '刘德华', '李雪健'],
          boxOffice: '32.5亿',
        },
        {
          id: 2,
          title: '复仇者联盟5',
          image: getLocalImage('https://via.placeholder.com/300x450?text=复仇者联盟5'),
          rating: 8.7,
          year: 2024,
          duration: '165分钟',
          country: '美国',
          genres: ['科幻', '动作', '冒险'],
          description: '复仇者联盟面临前所未有的威胁，他们必须联合所有超级英雄，共同守护宇宙的和平。漫威电影宇宙的新篇章。',
          director: '罗素兄弟',
          actors: ['小罗伯特·唐尼', '克里斯·埃文斯', '斯嘉丽·约翰逊'],
          boxOffice: '56.3亿',
        },
        {
          id: 3,
          title: '封神第二部：榜上有名',
          image: getLocalImage('https://via.placeholder.com/300x450?text=封神第二部'),
          rating: 8.5,
          year: 2024,
          duration: '155分钟',
          country: '中国',
          genres: ['奇幻', '动作', '古装'],
          description: '商周之战进入白热化阶段，各方势力展开激烈较量，封神榜最终将由谁来执掌？东方奇幻史诗巨制。',
          director: '乌尔善',
          actors: ['黄渤', '费翔', '李雪健'],
          boxOffice: '26.8亿',
        },
        {
          id: 4,
          title: '奥本海默',
          image: getLocalImage('https://via.placeholder.com/300x450?text=奥本海默'),
          rating: 9.1,
          year: 2023,
          duration: '180分钟',
          country: '美国',
          genres: ['传记', '剧情', '历史'],
          description: '讲述了"原子弹之父"罗伯特·奥本海默的传奇一生，以及他如何领导曼哈顿计划研发原子弹。',
          director: '克里斯托弗·诺兰',
          actors: ['基里安·墨菲', '艾米丽·布朗特', '马特·达蒙'],
          boxOffice: '11.5亿',
        },
      ],
      
      // 最新上映
      newReleases: [
        {
          id: 101,
          title: '年会不能停！',
          subtitle: '大鹏、白客主演喜剧',
          image: getLocalImage('https://via.placeholder.com/200x300?text=年会不能停'),
          rating: 8.6,
          reviews: 2.3,
          watchers: 5.6,
          director: '董润年',
          actors: ['大鹏', '白客', '田雨'],
          releaseDate: '2024-01-18',
          genres: ['喜剧'],
        },
        {
          id: 102,
          title: '热辣滚烫',
          subtitle: '贾玲导演作品',
          image: getLocalImage('https://via.placeholder.com/200x300?text=热辣滚烫'),
          rating: 8.3,
          reviews: 1.8,
          watchers: 4.2,
          director: '贾玲',
          actors: ['贾玲', '雷佳音', '张小斐'],
          releaseDate: '2024-01-25',
          genres: ['喜剧', '剧情'],
        },
        {
          id: 103,
          title: '第二十条',
          subtitle: '张艺谋导演新作',
          image: '/src/assets/二次元美食节海报_3.jpg',
          rating: 8.7,
          reviews: 2.1,
          watchers: 4.9,
          director: '张艺谋',
          actors: ['雷佳音', '马丽', '赵丽颖'],
          releaseDate: '2024-02-01',
          genres: ['剧情', '喜剧'],
        },
        {
          id: 104,
          title: '熊出没·逆转时空',
          subtitle: '春节档动画大电影',
          image: '/src/assets/动漫.png',
          rating: 8.4,
          reviews: 1.5,
          watchers: 3.8,
          director: '林汇达',
          actors: ['张伟', '张秉君', '谭笑'],
          releaseDate: '2024-02-10',
          genres: ['动画', '冒险', '喜剧'],
        },
        {
          id: 105,
          title: '三大队',
          subtitle: '张译主演犯罪片',
          image: '/src/assets/鬼灭之刃.jpeg',
          rating: 8.8,
          reviews: 3.2,
          watchers: 6.7,
          director: '戴墨',
          actors: ['张译', '李晨', '魏晨'],
          releaseDate: '2024-01-10',
          genres: ['犯罪', '剧情', '悬疑'],
        },
        {
          id: 106,
          title: '金手指',
          subtitle: '刘德华、梁朝伟主演',
          image: '/src/assets/数码科技展.png',
          rating: 8.5,
          reviews: 2.8,
          watchers: 5.9,
          director: '庄文强',
          actors: ['刘德华', '梁朝伟', '蔡卓妍'],
          releaseDate: '2024-01-20',
          genres: ['犯罪', '剧情', '悬疑'],
        },
        {
          id: 107,
          title: '想见你',
          subtitle: '柯佳嬿、许光汉主演',
          image: '/src/assets/科技数码展宣传图.jpg',
          rating: 8.9,
          reviews: 3.5,
          watchers: 7.2,
          director: '黄天仁',
          actors: ['柯佳嬿', '许光汉', '施柏宇'],
          releaseDate: '2024-01-15',
          genres: ['爱情', '悬疑', '奇幻'],
        },
        {
          id: 108,
          title: '潜行',
          subtitle: '刘德华、林家栋主演',
          image: '/src/assets/周杰伦.png',
          rating: 8.2,
          reviews: 1.9,
          watchers: 4.5,
          director: '关智耀',
          actors: ['刘德华', '林家栋', '彭于晏'],
          releaseDate: '2024-02-05',
          genres: ['动作', '犯罪', '悬疑'],
        },
      ],
      
      // 经典影片
      classicMovies: [
        {
          id: 201,
          title: '肖申克的救赎',
          subtitle: '影史第一经典',
          image: getLocalImage('https://via.placeholder.com/200x300?text=肖申克的救赎'),
          rating: 9.7,
          reviews: 15.8,
          watchers: 89.2,
          year: 1994,
          director: '弗兰克·德拉邦特',
          actors: ['蒂姆·罗宾斯', '摩根·弗里曼'],
          genres: ['剧情', '犯罪'],
        },
        {
          id: 202,
          title: '霸王别姬',
          subtitle: '华语电影巅峰之作',
          image: getLocalImage('https://via.placeholder.com/200x300?text=霸王别姬'),
          rating: 9.6,
          reviews: 12.5,
          watchers: 76.3,
          year: 1993,
          director: '陈凯歌',
          actors: ['张国荣', '巩俐', '张丰毅'],
          genres: ['剧情', '爱情', '同性'],
        },
        {
          id: 203,
          title: '阿甘正传',
          subtitle: '汤姆·汉克斯经典',
          image: getLocalImage('https://via.placeholder.com/200x300?text=阿甘正传'),
          rating: 9.5,
          reviews: 14.2,
          watchers: 82.7,
          year: 1994,
          director: '罗伯特·泽米吉斯',
          actors: ['汤姆·汉克斯', '罗宾·怀特'],
          genres: ['剧情', '爱情'],
        },
        {
          id: 204,
          title: '泰坦尼克号',
          subtitle: '世纪爱情经典',
          image: getLocalImage('https://via.placeholder.com/200x300?text=泰坦尼克号'),
          rating: 9.4,
          reviews: 13.8,
          watchers: 85.1,
          year: 1997,
          director: '詹姆斯·卡梅隆',
          actors: ['莱昂纳多·迪卡普里奥', '凯特·温丝莱特'],
          genres: ['剧情', '爱情', '灾难'],
        },
        {
          id: 205,
          title: '千与千寻',
          subtitle: '宫崎骏动画经典',
          image: getLocalImage('https://via.placeholder.com/200x300?text=千与千寻'),
          rating: 9.4,
          reviews: 11.6,
          watchers: 78.9,
          year: 2001,
          director: '宫崎骏',
          actors: ['柊瑠美', '入野自由', '夏木真理'],
          genres: ['动画', '奇幻', '冒险'],
        },
        {
          id: 206,
          title: '这个杀手不太冷',
          subtitle: '让·雷诺代表作',
          image: getLocalImage('https://via.placeholder.com/200x300?text=这个杀手不太冷'),
          rating: 9.4,
          reviews: 13.5,
          watchers: 81.3,
          year: 1994,
          director: '吕克·贝松',
          actors: ['让·雷诺', '娜塔莉·波特曼', '加里·奥德曼'],
          genres: ['动作', '犯罪', '剧情'],
        },
        {
          id: 207,
          title: '星际穿越',
          subtitle: '诺兰科幻巨制',
          image: getLocalImage('https://via.placeholder.com/200x300?text=星际穿越'),
          rating: 9.3,
          reviews: 14.7,
          watchers: 83.6,
          year: 2014,
          director: '克里斯托弗·诺兰',
          actors: ['马修·麦康纳', '安妮·海瑟薇', '杰西卡·查斯坦'],
          genres: ['科幻', '冒险', '剧情'],
        },
        {
          id: 208,
          title: '无间道',
          subtitle: '香港警匪片经典',
          image: getLocalImage('https://via.placeholder.com/200x300?text=无间道'),
          rating: 9.3,
          reviews: 12.1,
          watchers: 74.5,
          year: 2002,
          director: '刘伟强、麦兆辉',
          actors: ['梁朝伟', '刘德华', '黄秋生'],
          genres: ['犯罪', '悬疑', '惊悚'],
        },
      ],
      
      // 精选影评
      movieReviews: [
        {
          id: 301,
          movieTitle: '流浪地球3',
          username: '星空漫游者',
          avatar: getLocalImage('https://via.placeholder.com/50x50?text=星空'),
          rating: 5,
          date: '2024-01-25',
          content: '作为中国科幻电影的里程碑，《流浪地球3》再次超越了前作。特效震撼、剧情紧凑，尤其是最后人类团结一心的场景让人泪目。中国科幻电影正在走向世界！',
          likes: 1256,
          comments: 234,
          userLevel: '高级影评人',
          verified: true,
        },
        {
          id: 302,
          movieTitle: '年会不能停！',
          username: '职场小白',
          avatar: getLocalImage('https://via.placeholder.com/50x50?text=职场'),
          rating: 4,
          date: '2024-01-24',
          content: '太真实了！这部电影简直就是职场生活的真实写照。大鹏的表演自然生动，笑点密集但不低俗。强烈推荐上班族观看，看完会有共鸣和思考。',
          likes: 892,
          comments: 156,
          userLevel: '活跃用户',
          verified: false,
        },
        {
          id: 303,
          movieTitle: '第二十条',
          username: '电影爱好者小明',
          avatar: getLocalImage('https://via.placeholder.com/50x50?text=小明'),
          rating: 5,
          date: '2024-01-23',
          content: '张艺谋导演的又一力作！电影通过一个看似普通的案件，深刻反映了社会现实。雷佳音和马丽的演技令人惊艳，剧情反转又反转，不到最后一刻根本猜不到结局。',
          likes: 1567,
          comments: 278,
          userLevel: '专业影评人',
          verified: true,
        },
        {
          id: 304,
          movieTitle: '肖申克的救赎',
          username: '经典电影收藏家',
          avatar: getLocalImage('https://via.placeholder.com/50x50?text=收藏家'),
          rating: 5,
          date: '2024-01-20',
          content: '时隔多年再次观看这部经典，依然被深深震撼。希望是这个世界上最美好的东西，而这部电影完美诠释了希望的力量。蒂姆·罗宾斯和摩根·弗里曼的表演堪称教科书级别的演技。',
          likes: 2341,
          comments: 456,
          userLevel: '资深影评人',
          verified: true,
        },
      ],
      
      // 即将上映
      upcomingMovies: [
        {
          id: 401,
          title: '唐人街探案4',
          subtitle: '陈思诚导演作品',
          image: getLocalImage('https://via.placeholder.com/160x240?text=唐人街探案4'),
          genres: ['喜剧', '悬疑', '动作'],
          releaseMonth: '2月',
          releaseDay: '14',
          director: '陈思诚',
          actors: ['王宝强', '刘昊然', '托尼·贾'],
          expectRating: 8.5,
          wantWatch: 123456,
        },
        {
          id: 402,
          title: '功夫熊猫4',
          subtitle: '经典动画续集',
          image: getLocalImage('https://via.placeholder.com/160x240?text=功夫熊猫4'),
          genres: ['动画', '喜剧', '动作'],
          releaseMonth: '3月',
          releaseDay: '8',
          director: '迈克·米切尔',
          actors: ['杰克·布莱克', '安吉丽娜·朱莉'],
          expectRating: 8.3,
          wantWatch: 98765,
        },
        {
          id: 403,
          title: '沙丘：第二部',
          subtitle: '科幻史诗巨制',
          image: getLocalImage('https://via.placeholder.com/160x240?text=沙丘2'),
          genres: ['科幻', '冒险', '剧情'],
          releaseMonth: '3月',
          releaseDay: '22',
          director: '丹尼斯·维伦纽瓦',
          actors: ['提莫西·查拉梅', '赞达亚', '丽贝卡·弗格森'],
          expectRating: 9.2,
          wantWatch: 187654,
        },
        {
          id: 404,
          title: '疯狂动物城2',
          subtitle: '迪士尼动画续集',
          image: getLocalImage('https://via.placeholder.com/160x240?text=疯狂动物城2'),
          genres: ['动画', '冒险', '喜剧'],
          releaseMonth: '4月',
          releaseDay: '5',
          director: '拜伦·霍华德',
          actors: ['金妮弗·古德温', '杰森·贝特曼'],
          expectRating: 8.8,
          wantWatch: 156789,
        },
        {
          id: 405,
          title: '黑客帝国：重启',
          subtitle: '经典科幻重启',
          image: getLocalImage('https://via.placeholder.com/160x240?text=黑客帝国'),
          genres: ['科幻', '动作', '冒险'],
          releaseMonth: '5月',
          releaseDay: '17',
          director: '拉娜·沃卓斯基',
          actors: ['基努·里维斯', '凯瑞-安·莫斯'],
          expectRating: 8.6,
          wantWatch: 145678,
        },
      ],
    }
  },
  mounted() {
    // 自动轮播
    this.carouselInterval = setInterval(() => {
      this.nextSlide()
    }, 5000)
  },
  beforeUnmount() {
    // 清除轮播定时器
    if (this.carouselInterval) {
      clearInterval(this.carouselInterval)
    }
  },
  methods: {
    // 轮播图控制
    prevSlide() {
      this.carouselIndex = (this.carouselIndex - 1 + this.popularMovies.length) % this.popularMovies.length
    },
    nextSlide() {
      this.carouselIndex = (this.carouselIndex + 1) % this.popularMovies.length
    },
  },
}
</script>

<style scoped>
/* 电影页面容器 */
.movie-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 50px;
}

/* 头部banner */
.movie-banner {
    position: relative;
    height: 450px;
    background-image: url('/src/assets/喜剧电影.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
}

.banner-content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 1;
  padding: 0 20px;
}

.banner-title {
  font-size: 56px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.banner-subtitle {
  font-size: 24px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 分类标签 */
.movie-categories {
  background-color: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.movie-categories::-webkit-scrollbar {
  display: none;
}

.category-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.category-tab:hover {
  color: #ff6b6b;
}

.category-tab.active {
  color: white;
  background-color: #ff6b6b;
}

/* 通用区域样式 */
.popular-movies-section,
.new-releases-section,
.classic-movies-section,
.movie-reviews-section,
.upcoming-movies-section {
  margin: 30px 20px;
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #ff6b6b;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-link:hover {
  text-decoration: underline;
}

/* 电影详情增强样式 */
.movie-crew {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.movie-crew p {
  margin: 5px 0;
  color: #e0e0e0;
  font-size: 14px;
}

.movie-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.add-to-wishlist-btn {
  background-color: #3a3a3a;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.add-to-wishlist-btn:hover {
  background-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 最新上映区域样式 */
.movie-duration-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.movie-director {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  font-style: italic;
}

.movie-genres-small {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.genre-tag-small {
  background-color: #f0f0f0;
  color: #333;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.genre-tag-small:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}

.movie-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-to-wishlist-small {
  background-color: transparent;
  border: 1px solid #ddd;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
}

.add-to-wishlist-small:hover {
  background-color: #ffebee;
  border-color: #ff9e9e;
  color: #e53935;
  transform: scale(1.1);
}

/* 经典影片区域样式 */
.classic-movie-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
}

.movie-card.classic:hover .classic-movie-container {
  transform: scale(1.02);
}

.classic-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #d4af37;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.watch-btn {
  background-color: #1e88e5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  width: 100%;
  justify-content: center;
}

.watch-btn:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(30, 136, 229, 0.3);
}

/* 精选影评区域样式 */
.user-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.verified-badge {
  color: #1e88e5;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.verified-badge:hover {
  transform: rotate(10deg);
}

.user-level {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}

.movie-rating-tiny {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffc107;
  font-size: 14px;
  font-weight: 500;
}

.movie-rating-tiny i {
  font-size: 12px;
}

.review-content {
  position: relative;
  line-height: 1.7;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 15px 0;
}

.spoiler-alert {
  color: #ff9800;
  font-size: 14px;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #fff3e0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.review-tags {
  display: flex;
  gap: 8px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.review-tag {
  background-color: #f5f5f5;
  color: #666;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.review-tag:hover {
  background-color: #e0e0e0;
  color: #333;
  transform: scale(1.05);
}

.share-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-btn:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
  transform: translateY(-1px);
}

.review-stats {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  text-align: right;
}

.view-count {
  color: #999;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 即将上映区域样式 */
.expected-rating {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(255, 193, 7, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(2px);
}

.movie-actors {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.want-watch-count {
  color: #ff5252;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.remind-btn {
  background-color: #ff9800;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.remind-btn:hover {
  background-color: #f57c00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

/* 响应式设计增强 */
@media (max-width: 768px) {
  .movie-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .movie-actions button {
    width: 100%;
  }
  
  .user-name-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .review-tags {
    justify-content: center;
  }
}

/* 轮播图样式 */
.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 100%;
}

.movie-card-large {
  display: flex;
  gap: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.movie-poster-large {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.movie-info-large {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.movie-rating {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.rating-number {
  font-size: 48px;
  font-weight: bold;
  color: #ff6b6b;
}

.rating-text {
  font-size: 16px;
  color: #666;
}

.movie-title-large {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.movie-description {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.movie-details {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-item {
  font-size: 14px;
  color: #999;
  padding: 4px 12px;
  background-color: #e9ecef;
  border-radius: 12px;
}

.movie-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.genre-tag {
  padding: 6px 16px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 16px;
  font-size: 14px;
}

.watch-trailer-btn {
  padding: 12px 32px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.watch-trailer-btn:hover {
  background-color: #ee5253;
  transform: translateY(-2px);
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: white;
  width: 32px;
  border-radius: 6px;
}

/* 电影网格 */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}

.movie-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.movie-card:hover {
  transform: translateY(-4px);
}

.movie-poster-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
}

.movie-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-poster-container:hover .movie-poster {
  transform: scale(1.05);
}

.poster-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.movie-poster-container:hover .poster-overlay {
  opacity: 1;
}

.quick-watch-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 24px;
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-watch-btn:hover {
  background-color: white;
  transform: scale(1.1);
}

.rating-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
}

.ticket-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background-color: #4CAF50;
  color: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
}

.classic-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background-color: #FF9800;
  color: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
}

.movie-info {
  padding: 0 4px;
}

.movie-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
  line-height: 1.3;
}

.movie-subtitle {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
  line-height: 1.3;
}

.movie-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #ccc;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 影评样式 */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-card {
  padding: 24px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.review-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #333;
}

.review-date {
  font-size: 14px;
  color: #999;
}

.review-rating {
  display: flex;
  align-items: center;
}

.rating-stars {
  font-size: 16px;
  color: #ffc107;
}

.rating-stars .fa-star.active {
  color: #ffc107;
}

.rating-stars .fa-star {
  color: #e9ecef;
}

.review-movie-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.review-content {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.review-actions {
  display: flex;
  gap: 20px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 16px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* 即将上映样式 */
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.upcoming-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.upcoming-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.release-date {
  width: 80px;
  height: 80px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.release-month {
  font-size: 18px;
}

.release-day {
  font-size: 32px;
}

.upcoming-poster {
  width: 120px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.upcoming-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.upcoming-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

.upcoming-subtitle {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}

.upcoming-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.mini-genre-tag {
  padding: 4px 12px;
  background-color: #e9ecef;
  color: #666;
  border-radius: 12px;
  font-size: 12px;
}

.remind-btn {
  padding: 8px 20px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: all 0.3s ease;
}

.remind-btn:hover {
  background-color: #ee5253;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-title {
    font-size: 40px;
  }
  
  .banner-subtitle {
    font-size: 20px;
  }
  
  .movie-card-large {
    flex-direction: column;
    align-items: center;
  }
  
  .movie-poster-large {
    width: 240px;
    height: 360px;
  }
  
  .movie-info-large {
    width: 100%;
  }
  
  .movie-title-large {
    font-size: 28px;
  }
  
  .upcoming-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 32px;
  }
  
  .banner-subtitle {
    font-size: 16px;
  }
  
  .movie-categories {
    padding: 12px;
    gap: 8px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
  }
}
</style>